<template>
	<div>
		<h1>{{msg}},学生的名字为:{{studentName}}</h1>
		
		<!-- 通过父组件给子组件绑定一个自定义事件实现: 子给父传递数据 (第一种写法，使用@或v-on) -->
		<!-- <Student v-on:atguigu="getStudentName" @demo="m1"/> -->
		
		<!-- 通过父组件给子组件绑定一个自定义事件实现: 子给父传递数据 (第二种写法，使用ref) -->
		<Student ref="student"/>
		<hr >
		<!-- 通过父组件给子组件传递函数类型的props实现: 子给父传递数据 -->
		<School :getSchoolName="getSchoolName"></School>
	</div>
</template>

<script>
	// 引入School组件
	import Student from "./components/Student.vue"
	import School from "./components/School.vue"
	export default {
		name:"App",
		components:{
			Student,
			School
		},
		data(){
			return {
				msg:"你好啊",
				studentName:""
			}
		},
		methods:{
			getSchoolName(name){ // eslint-disable-line no-unused-vars
				console.log("App 收到的学校的名字是",name)
			},
			getStudentName(name){ // eslint-disable-line no-unused-vars
				console.log("App 收到的学生的名字是",name)
				this.studentName = name
			},
			m1(){
				console.log("demo事件被触发了")
			}
		},
		mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) // 绑定自定义事件
		}
	}
</script>

<style>
</style>
